import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
// 导入的规则：1：找相应文件名的.js  2:找相应文件名的.vue 3:找相应文件夹下面的package.json 4:找相应文件夹下面的index.js 5:找相应文件夹下面的index.vue
// 能省略：.js  .vue   index.js   index.vue
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/search',
    component: () => import('@/views/search/index.vue')
  },
  {
    path: '/result/:key',
    component: () => import('@/views/search/result.vue')
  },
  {
    path: '/chat',
    component: () => import('@/views/chat/index.vue')
  },
  {
    path: '/layout',
    component: () => import('@/views/layout/index.vue'),
    redirect: '/layout/home',
    children: [
      {
        path: 'home', // 相对写法，不以/开头会拼接父级  /layout/home  绝对写法：/ 开头直接使用当前的  /home
        component: () => import('@/views/home/index.vue'),
        meta: {
          keep: true
        }
      },
      {
        path: 'question',
        component: () => import('@/views/question/index.vue')
      },
      {
        path: 'video',
        component: () => import('@/views/video/index.vue')
      },
      {
        path: 'mine',
        // 路由元：可以配制一些参数值在访问路由信息时能拿到
        meta: {
          needLogin: true
        },
        component: () => import('@/views/mine/index.vue')
      },
      {
        path: '/mine/edit',
        meta: {
          needLogin: true,
          // 是否需要显示tab
          noTab: true
        },
        component: () => import('@/views/mine/edit.vue')
      },
      {
        path: '/article/:id',
        component: () => import('@/views/article/index.vue'),
        meta: {
          // 是否需要显示tab
          noTab: true
        }
      }
    ]
  },
  {
    path: '/',
    redirect: '/layout/home'
  }
]

const router = new VueRouter({
  routes
})

// 前置守卫：任意跳转的跳转进入前都会先经过前置守卫
// 注意点 1：不要死循环了，不要只写next('path地址') 2:next()后面的代码还是会执行
router.beforeEach(async (to, from, next) => {
  // to:去哪里的路由
  // from:从哪来
  // next：是否允许通过，正常通过  next()  不允许通过 next(其它路由path)
  // 需求：需要登陆访问的页面，登录后才可正常进入，没登陆，回登录页
  // console.log('to', to)
  /*
    判断页面是否需要登陆访问
         需要登陆
                判断是否有token
                       有token
                           直接放行next()
                       没有token
                           跳转到登陆页 next('/login')
         不需要登陆
                直接放行next()   */

  if (to.meta.needLogin) {
    // 需要登陆
    if (store.state.token.token) {
      // 有token
      // 调用接口获取用户信息
      // console.log(1)
      await store.dispatch('getUserInfo')
      next()
      // console.log(2)
    } else {
      // 没有token
      next('/login?back=' + to.fullPath)
    }
  } else {
    // 不需要登陆
    next()
  }
})

// 加入路由错误处理代码
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

export default router
